import React, { useEffect, useState } from 'react';
import { inject, observer } from 'mobx-react';
import { Box, CartMiniSummary, makeToast, useViewport } from '@nova-hf/ui';
import { IContext } from 'beta/typings/context';
import StepWrapper from 'beta/containers/layout/StepWrapper';
import { useTranslation } from 'utils/i18n';
import { CardItem } from 'beta/pages/thjonustur/[serviceId]/skref/components/SellingCardItem';
import {
  ConfirmInternetAndAbroad,
  InternetAndAbroadOverview,
} from 'beta/pages/thjonustur/[serviceId]/skref/containers';
import { ChangePlan } from 'beta/pages/thjonustur/[serviceId]/skref/containers/ConfirmInternetAndAbroad';
import { useFetchApplicableVariants } from 'beta/pages/thjonustur/[serviceId]/skref/hooks';

type PakkabreytingProps = {
  customerId: string;
  contractId: string;
};

const COLOR = 'orange';

const Pakkabreyting = ({ customerId, contractId }: PakkabreytingProps) => {
  const { t } = useTranslation('thjonustubreyting');
  const { isSmall } = useViewport();
  const [selectedVariant, setSelectedVariant] = useState<CardItem>();
  const [selectedOption, setSelectedOption] = useState<CardItem>();

  const { applicableVariantsAsCardItems, currentContractAsCardItem, loading, error } =
    useFetchApplicableVariants({
      customerId,
      contractId,
    });

  const handleSelectVariant = (variant: CardItem) => {
    if (selectedVariant?.id === variant.id) {
      setSelectedVariant(undefined);
    } else {
      setSelectedVariant(variant);
    }
  };

  const handleSelectOption = (variant: CardItem) => {
    if (selectedOption?.id === variant.id) {
      setSelectedOption(undefined);
    } else setSelectedOption(variant);
  };

  useEffect(() => {
    if (error) makeToast.danger(t('toast.contractsError'), error ?? '');
  }, [error]);

  return (
    <StepWrapper
      color={COLOR}
      returnUrl={`/beta/${customerId}/askriftir/${contractId}`}
      title={t('title')}
      icon="mobileReturn"
      childrenBottom={
        !isSmall && (
          <Box display="flex" flexDirection="column" gap={3}>
            {(selectedVariant?.id || selectedOption?.id) && (
              <CartMiniSummary
                cartPayNowItems={[
                  ...(selectedVariant?.id
                    ? [
                        {
                          price: selectedVariant?.price ?? 0,
                          title: selectedVariant?.title ?? '',
                        },
                      ]
                    : []),
                  ...(selectedOption?.id
                    ? [
                        {
                          price: selectedOption?.price ?? 0,
                          title: selectedOption?.title ?? '',
                        },
                      ]
                    : []),
                ]}
                {...((selectedOption?.id || selectedVariant?.id) && {
                  payNow: {
                    price: (selectedOption?.price ?? 0) + (selectedVariant?.price ?? 0),
                    title: t('cartMiniSummary.recurringTitle'),
                  },
                })}
                cartTitle={t('cartMiniSummary.title')}
                color={COLOR}
              />
            )}
          </Box>
        )
      }
    >
      <InternetAndAbroadOverview
        applicableVariantsAsCardItems={applicableVariantsAsCardItems}
        onSelectVariant={handleSelectVariant}
        onSelectOption={handleSelectOption}
        selectedVariant={selectedVariant}
        selectedOption={selectedOption}
        isLoading={loading}
        color={COLOR}
      />
      <ConfirmInternetAndAbroad
        changePlan={ChangePlan.Variant}
        currentContract={currentContractAsCardItem}
        applicableVariantsAsCardItem={selectedVariant}
        optionsAsCardItem={selectedOption}
        color={COLOR}
      />
    </StepWrapper>
  );
};

Pakkabreyting.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    customerId: query.customerId,
    contractId: query.contractId,
    namespacesRequired: ['thjonustubreyting', 'steps'],
  };
};

export default inject('steps')(observer(Pakkabreyting));